<template>
  <div class="picbookList">
    <div class="listMain">
      <div class="bookMain" ref="bookMain">
        <Nav />
        <div class="next"></div>
        <swiper :options="swiperOption" class="listSwiper" ref="listSwiper">
          <swiper-slide v-for="(listPage,pageIndex) in list" :key="pageIndex">
            <div class="listBox">
              <div class="iconBox" v-for="(picbook,index) in listPage" :key="index">
                <v-touch @tap="picbookTouch(picbook)">
                  <img :src="picbook.detail.thumbnailUrl">
                  <div class="icon-free" v-if="picbook.vipFreeType > 0"></div>
                </v-touch>
              </div>
            </div>
          </swiper-slide>
        </swiper>
      </div>
    </div>
    <LoadPicbook ref="loadPicbook" />
  </div>
</template>

<script>
import { mapGetters, mapActions } from "vuex"
import Nav from "./nav.vue"
import LoadPicbook from "./loadPicbook.vue"
export default {
  data() {
    return {
      swiperOption: {
        speed: 500,
        longSwipesRatio: 0.15,
        on: {
          //翻页
          slideChangeTransitionStart: () => {
            if (this.$refs.listSwiper.swiper) this.setListPage(this.$refs.listSwiper.swiper.activeIndex)
          }
        }
      }
    }
  },
  components: {
    Nav,
    LoadPicbook,
  },
  created() {
    //初始化开始页
    this.swiperOption.initialSlide = this.listPage
  },
  computed: {
    picbookTypeList() {
      return this.picbookList.filter(item => { return item.groupName === this.picbookType })
    },
    list() {
      return this.split(this.picbookTypeList, 6)
    },
    ...mapGetters("picbookListStatus", {
      picbookList: "getPicbookList",
      picbookType: "getPicbookType",
      listPage: "getListPage",
      vipPicbookList: "getVipPicbookList",
    }),
  },
  methods: {
    //点击绘本
    picbookTouch: async function (picbook) {
      this.touchMusic()
      this.setIsSeedEntery(false)
      this.setLoading({
        callback: () => {
          this.$router.push({ path: "/details", query: { id: picbook.id } })
        }
      })
    },
    ...mapActions("picbookListStatus", ["setListPage"]),
    ...mapActions("mainStatus", ["setLoading"]),
    ...mapActions("seedActivityStatus", ["setIsSeedEntery"]),
  }
}
</script>

<style scoped lang='stylus'>
.picbookList
  width 100%
  height 100%
  position absolute
  z-index 97
  background url($urlTitle + 'newList/背景.png') 0 0 / 100% 100%
  .listMain
    position absolute
    width 100vw
    height 100vh
    transform translate3d(calc(0px - var(--X)), calc(0px - var(--Y)), 0px)
    .bookMain
      background url($urlTitle + 'newList/书背景.png') 0 0 / 100% 100%
      width 152vh
      height 80vh
      margin 18vh auto 0 auto
      max-width 90vw
      max-height 55vw
      min-width 75vw
      position relative
      .listSwiper
        $coord('WHLT', 75%, 80%, 12.5%, 10%)
        .listBox
          position absolute
          width 100%
          height 100%
          .iconBox
            position relative
            width 33.3%
            height 50%
            float left
            $alignCenter()
            img
              width 90%
              max-height 90%
            .icon-free
              $coord('WHRT',1.5rem,1.5rem,1.5rem,0.7rem)
              background url($urlTitle + 'icon/免费.png') center center/contain no-repeat
      .next
        background url($urlTitle + 'newList/翻页角.png') 0 0 / 100% 100%
        $coord('WHRB', 35%, 30%, 3%, 5%)
</style>
